<template>
  <div>
    <el-form @submit.native.prevent :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="项目名称查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.corp_name"
          placeholder="负责人查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          auto-top
          clearable
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          class="date-picker-ml"
          v-model="datePicked"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="应缴开始日期"
          end-placeholder="应缴结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="handleDateChange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <c-select
          :options="enumPayStatus"
          v-model="params['pay_status.eq']"
          @change="getData()"
          clearable
          placeholder="缴费状态"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-checkbox
          v-model="isNear"
          label="临近缴费"
          border
          @change="hanleNearChange"
        ></el-checkbox>
      </el-form-item>
    </el-form>

    <c-table
      border
      v-loading="loading"
      :stripe="false"
      :columns="tableColumns"
      :data="tableData"
      :row-class-name="tableRowClassName"
    >
      <template v-slot:address="scope">
        <el-tooltip effect="light" :content="scope.row.address">
          <div class="text-truncate">{{ scope.row.address }}</div>
        </el-tooltip>
      </template>

      <template v-slot:payStatus="scope">
        <div :class="['text-wrapper', `text-${scope.row.payStatusStyle}`]">
          <div>{{ scope.row.payStatusLabel }}</div>
          <small>{{ scope.row.payStatusSubLabel || '' }}</small>
        </div>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <accounting-edit-dialog
      :visible.sync="editVisible"
      :edit-row="editRow"
      :view-mode="editViewMode"
      @success="getData(params.index)"
    ></accounting-edit-dialog>
  </div>
</template>

<script>
import { dateFromString } from '@vimi/utils-tool'
import { lastPickerShortcuts, nextPickerShortcuts } from '@/common/plugins/tools/date'

import settleMixins, {
  enumPayStatus,
  enumPayStatusStyle,
} from '@/credit/views/city/settle/settleMixins'

import SelectAddress from '@/components/select/SelectAddress'
import AccountingEditDialog from '@/credit/views/city/settle/AccountingEditDialog'

export const DATE_PERIOD = 60 // d

export default {
  components: {
    SelectAddress,
    AccountingEditDialog,
  },
  mixins: [settleMixins],
  data() {
    return {
      enumPayStatus,
      params: {
        index: 1,
        size: 15,
        customer_name: '',
        corp_name: '',
        address_code: '',
        'gua_type.eq': '',
        'service_id.eq': '',
      },
      order: {
        N1pay_status: 'asc',
        N2due_warrant_date: 'desc',
      },

      isNear: false,
      datePicked: [],

      tableColumns: [
        {
          attrs: { label: '项目名称', prop: 'customer_name', minWidth: '120px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '地址', prop: 'address', minWidth: 150 }, slot: 'address' },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center', width: '120px' } },
        { attrs: { label: '在保余额(万元)', prop: 'left_funds', align: 'center' } },
        { attrs: { label: '担保费率(%)', prop: 'gua_rate', align: 'center' } },
        {
          attrs: { label: '缴费金额(元)', prop: 'due_warrant_fee', align: 'right', minWidth: 100 },
        },
        { attrs: { label: '应缴时间', prop: 'dueWarrantDate', align: 'center', minWidth: 100 } },
        { attrs: { label: '银行机构', prop: 'bank_name', align: 'center' } },
        {
          attrs: { label: '缴费状态', prop: 'payStatusLabel', align: 'center', minWidth: 90 },
          slot: 'payStatus',
        },
        {
          attrs: { label: '操作', align: 'center', minWidth: 130 },
          operations: [
            {
              content: '去缴费',
              icon: 'fa fa-gavel',
              event: this.handleEdit,
              ifRender: r => r.payStatus === 0,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.hanleView,
            },
          ],
        },
      ],

      pickerOptions: {
        shortcuts: [...lastPickerShortcuts, ...nextPickerShortcuts],
      },

      // 编辑
      editRow: {},
      editVisible: false,
      editViewMode: false,

      // 提前还款
      prepayRow: {},
      prepayVisible: false,
      prepayViewMode: false,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    dataAdapter(row) {
      row.dueWarrantDate = this.$utils.dateFormat(row.due_warrant_date, 'yyyy-MM-dd') || '-'

      row.payStatus = +row.pay_status
      row.diffDay = this.getDiffDay(row)
      row.nearStyle = this.getNearStyle(row)

      const status = row.payStatus
      row.payStatusLabel = enumPayStatus[status]
      row.payStatusStyle = enumPayStatusStyle[status]
      row.payStatusSubLabel = ''
      if (status === 0 && -row.diffDay > 1) {
        row.payStatusStyle = 'warning'
        row.payStatusSubLabel = `(欠费${-row.diffDay - 1}天)`
      }

      return row
    },
    handleEdit(row = {}) {
      this.editViewMode = false
      this.editRow = row
      this.editVisible = true
    },
    handlePrepay(row = {}) {
      this.prepayViewMode = false
      this.prepayRow = row
      this.prepayVisible = true
    },
    hanleView(row = {}) {
      this.editViewMode = true
      this.editRow = row
      this.editVisible = true
    },
    hanleNearChange() {
      this.datePicked = ''
      this.resetParams()

      if (this.isNear) {
        const { today, nextday } = this.getTodayAndNextDay()
        this.params['due_warrant_date.gte'] = today
        this.params['due_warrant_date.lte'] = `${nextday} 23:59:59`
      } else {
        this.params['due_warrant_date.gte'] = ''
        this.params['due_warrant_date.lte'] = ''
      }

      this.params.index = 1
      this.getData()
    },
    handleDateChange() {
      // this.isNear = false
      this.params.index = 1
      this.resetParams()
      if (this.datePicked && this.datePicked.length === 2) {
        this.params['due_warrant_date.gte'] = this.datePicked[0]
        this.params['due_warrant_date.lte'] = `${this.datePicked[1]} 23:59:59`
      }

      this.getData()
    },
    resetParams() {
      this.params['pay_status.in'] = ''
      this.params['pay_status.eq'] = ''
      this.params['due_warrant_date.gt'] = ''
      this.params['due_warrant_date.gte'] = ''
      this.params['due_warrant_date.lte'] = ''
      this.params['due_warrant_date.lt'] = ''
    },
    getTodayAndNextDay() {
      return {
        today: this.$utils.dateFormat(new Date(), 'yyyy-MM-dd'),
        nextday: this.$utils.dateFormat(new Date(+new Date() + DATE_PERIOD * 8.64e7), 'yyyy-MM-dd'),
      }
    },
    tableRowClassName({ row }) {
      return row.nearStyle
    },
    getDiffDay(row) {
      const endDate = dateFromString(row.due_warrant_date)
      return !endDate ? null : Math.floor((endDate.getTime() - new Date().getTime()) / 8.64e7)
    },
    getNearStyle({ payStatus, diffDay }) {
      if ((!diffDay && diffDay !== 0) || payStatus > 0) return ''
      return diffDay <= DATE_PERIOD && diffDay >= -1 ? 'row-warning' : ''
    },
  },
}
</script>
<style lang="scss" scoped></style>
